<template>
  <div class="header">
    <!-- <img :src="img" alt="" /> -->
    <a-row style="border: 1px solid rgb(235, 237, 240)">
      <a-col class="nav" type="flex" justify="center" align="top" :span="24">
        <div class="layout">
          <a-col class="left" type="flex" justify="flex-start" align="top" :span="17">
            <ul>
              <li>
                <img src="../../assets/img/1.jpg" style="width: 50px; height: 50px" />
              </li>
              <li>
                <div class="nav-item">
                  <el-select
                    v-model="value4"
                    clearable
                    placeholder="北京站"
                    style="width: 100px"
                  >
                    <el-option
                      v-for="item in options"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </li>
              <li>
                <div class="breadcrumb">
                  <a-breadcrumb
                    style="position: relative; top: -15px; letter-spacing: 11px"
                  >
                    <a-breadcrumb-item style="font-size: 20px"
                      ><el-link :underline="false" @click="index" type="info"
                        >首页</el-link
                      ></a-breadcrumb-item
                    >
                    <a-breadcrumb-item style="font-size: 20px"
                      ><el-link :underline="false" @click="qiye" type="info"
                        >企业</el-link
                      ></a-breadcrumb-item
                    >
                    <a-breadcrumb-item style="font-size: 20px"
                      ><el-link :underline="false" @click="talent" type="info"
                        >人才</el-link
                      ></a-breadcrumb-item
                    >
                    <a-breadcrumb-item style="font-size: 20px">
                      <el-link :underline="false" @click="inform" type="info"
                        >通知</el-link
                      ></a-breadcrumb-item
                    >
                  </a-breadcrumb>
                </div>
              </li>
            </ul>
          </a-col>
          <a-col class="right">
            <ul>
              <li><a-button key="1" @click="login"> 登录 </a-button></li>
              <li><a-button key="2" @click="login"> 注册 </a-button></li>
            </ul>
          </a-col>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      img:
        "https://www.lgstatic.com/i/image/M00/72/69/Ciqc1F_DXdqANa-fAADn7hbHOTA577.JPG",
      options: [
        {
          value: "选项1",
          label: "全国站",
        },
        {
          value: "选项2",
          label: "北京站",
        },
        {
          value: "选项3",
          label: "上海站",
        },
        {
          value: "选项4",
          label: "广州站",
        },
        {
          value: "选项5",
          label: "西安站",
        },
      ],
      value4: "选项2",
    };
  },
  methods: {
    login() {
      this.$router.push("/log");
    },
    index() {
      this.$router.push("/index");
    },
    qiye() {
      this.$router.push("/qiye");
    },
    talent() {
      this.$router.push("/Talent");
    },
    inform() {
      this.$router.push("/Inform");
    },
  },
};
</script>

<style scoped>
img {
  width: 100%;
  height: 80px;
  margin: 0 auto;
  object-fit: none;
}
.layout > .left {
  height: 100%;
  width: 965px;
}
.layout > .left > ul {
  margin-left: 62px;
  letter-spacing: 4px;
  padding: 0px 1px;
}
.layout > .left > ul > li {
  float: left;
  margin: 4px;
}
.layout > .left > ul > li > a {
  display: inline-block;
  color: #afb5c0 !important;
  padding: 8px 14px;
}
.layout > .left > ul > li > a > span:hover {
  color: #ffffff;
}
.breadcrumb {
  width: 528px;
  /* height: 99px; */
  margin-top: 31px;
}
.layout > .right {
  height: 100%;
}
.layout > .right > ul {
  margin-right: -16px;
}
.layout > .right > ul > li {
  float: left;
  /* margin-top: 11px; */
  margin: 5px;
  padding: 0px;
}
img {
  width: 100%;
  height: 80px;
  margin: 0 auto;
  object-fit: none;
}
.layout > .left {
  height: 100%;
  width: 965px;
}
.layout > .left > ul {
  margin-left: 62px;
  letter-spacing: 4px;
  padding: 0px 1px;
}
.layout > .left > ul > li {
  float: left;
  margin: 4px;
}
.layout > .left > ul > li > a {
  display: inline-block;
  color: #afb5c0 !important;
  padding: 8px 14px;
}
.layout > .left > ul > li > a > span:hover {
  color: #ffffff;
}
.breadcrumb {
  width: 528px;
  /* height: 99px; */
  margin-top: 31px;
}
.layout > .right {
  height: 100%;
}
.layout > .right > ul {
  margin-right: -16px;
}
.layout > .right > ul > li {
  float: left;
  /* margin-top: 11px; */
  margin: 5px;
  padding: 0px;
}
.textBox {
  width: 84%;
  height: 36px;
  border: 1px dashed grey;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  top: -51px;
  left: 99px;
  text-align: center;
  color: black;
  background-color: white;
}
.text {
  width: 100%;
  position: absolute;
  top: -15px;
  /* bottom: 0; */
}
.slide-enter-active,
.slide-leave-active {
  transition: all 1s linear;
}
.slide-enter {
  transform: translateY(20px) scale(1);
  opacity: 1;
}
.slide-leave-to {
  transform: translateY(-20px) scale(0.8);
  opacity: 0;
}
</style>
